<template>
	<view class="fish">
		<view class="" style="flex: 5; padding-top: 200rpx;">
			<button class="transition-button" type="primary" @click="custom">自定义动画</button>

		</view>
		<view class="" style="flex: 3;">
			<view class="muyu-bar">
				<uni-transition ref="text" custom-class="text" mode-class="fade" :show="true">
					<text>功德 + 1</text>
				</uni-transition>
				<uni-transition ref="bang" custom-class="bang" mode-class="fade" :show="true">
					<image src="../../../static/muyu/gu.png" mode="aspectFill" style="width: 530rpx; height: 530rpx;transform: rotate(5deg)" />
				</uni-transition>
				<uni-transition ref="muyu" custom-class="muyu" mode-class="fade" :show="true">
					<image src="../../../static/muyu/muyu.png" mode="aspectFill" style="width: 500rpx; height: 500rpx;" />
				</uni-transition>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				styles: {}
			}
		},
		onLoad() {
			
		},
		methods: {
			
			custom() {
				this.$refs.bang.step({
					rotate: '-14',
					translateX: '-50px'
				}, {
					duration: 100,
					transformOrigin: '170% 25%'
				})
				this.$refs.bang.step({
					rotate: '0',
					translateX: '0px'
				}, {
					duration: 200,
					transformOrigin: '170% 25%'
				})
				this.$refs.muyu.step({
					scale: 0.98
				}, {
					delay: 90,
					duration: 50
				})
				this.$refs.muyu.step({
					scale: 1
				}, {
					duration: 50,
				})

				this.$refs.bang.run()
				this.$refs.muyu.run()
				
				// #ifndef H5
				uni.vibrateShort()
				// #endif
				
				this.audioFn()
			},
			audioFn: function() {
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.autoplay = false // 是否自动开始播放，默认为 false
				innerAudioContext.loop = false // 是否循环播放，默认为 false
				// uni.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
				// 	obeyMuteSwitch: false, // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
				// 	success: function(e) {},
				// 	fail: function(e) {}
				// })
				innerAudioContext.src = "/static/muyu/muyu-2.mp3"
				innerAudioContext.play()
			},
		}
	}
</script>



<style scoped>
	.fish{
		width: 100vw;
		height: 100vh;
		background-color: black;
		background-image: url('../../../static/muyu/fo.jpg');
		background-size: 200%;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.fish::before{
		content: '';
		width: 100vw;
		height: 100vh;
		/* background-color: rgba(0, 0, 0, .7); */
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0,0,0,1));
		position: absolute;
	}
	.muyu-bar{
		
	}
	.bang{
		position: absolute;
		right: 0rpx;
		margin-top: -300rpx;
	}
	.text{
		color: #fff;
		text-align: center;
		position: absolute;
		width: 200rpx;
		left: 275rpx;
		margin-top: -200rpx;
	}
	.muyu{
		
	}
</style>